<script>
import mapData from "../assets/data.json";
export default {
  render: function (createElement) {
    return createElement("div", {
      attrs: {
        id: "echart",
      },
      style: {
        height: "600px",
      },
    });
  },
  data() {
    return {
      mapData,
      dataList: [],
    };
  },
  methods: {
    initEchart() {
      echarts.init(document.getElementById("echart")).dispose(); //dispose 会释放内部占用的一些资源和事件绑定
      //初始化图标
      var myChart = echarts.init(document.getElementById("echart"));

      // 指定图表的配置项和数据
      var option = {
        color:['#8378ea','#e7bcf3','#fb7293','#ff9f7f','#ffdb5c','#9fe6b8','#32c5e9','#37a2da','#e690d1','#e7bcf3','#9d96f5','#ca8622','#96bfff','#bda29a'],
        title: {
          text: "广西累计确诊玫瑰图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "center",
          top: "bottom",
          data: this.mapData.data.list[15].city
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            magicType: {
              show: true,
              type: ["pie", "funnel"],
            },
          },
        },
        series: [
          {
            name: "确诊人数",
            type: "pie",
            radius: [30, 110],
            center: ["50%", "50%"],
            roseType: "area",
            data: this.dataList
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    changeData() {
        let res = this.mapData.data.list[15].city.map((item) => {
          return {
            name: item.name,
            value: item.conNum,
          };
        });
        this.dataList = res;
    }
  },
  mounted() {
    this.changeData();
    //绘制地图
    this.initEchart();
  },
};
</script>